<!-- 公用下拉菜单 -->
<template>
  <div
    class="filter-dropdown pos-absolute"
    style="top: 100%; min-width: 230px; min-height: 200px"
    :style="{ width: width + 'px', right: offect + '%' }"
    v-show="showDropdown"
    v-click-outside="close"
  >
    <div class="h-2.5"></div>
    <div class="border rounded-lg bg-white pt-2 pos-relative box-shadow-md">
      <b
        class="arrow-down triangle-up"
        style="position: absolute; top: -15px; transform: translateX(-50%)"
        :style="{ right: right + '%' }"
      ></b>
      <div class="filter-dropdown-content pt-3 px-1">
        <slot></slot>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";

const props = defineProps<{
  showDropdown: boolean;
  width: number;
  offect: number;
  right: number;
}>();

const emit = defineEmits(["close"]);

const close = () => {
  emit("close");
};
</script>
<style scoped lang="scss">
.filter-dropdown {
  z-index: 210;
  .filter-dropdown-content {
    transform: translateY(-10px);
  }
}
</style>
